<template>
	<div>
		<li v-for="item in props.model" :key="item">
			<span :class="{'font-bold': item.children}" @dblclick="changeNodeType(item)">{{item.name}}</span>
			<span v-show="item.children && item.children.length">
				<span @click="item.collapse=!item.collapse">[{{item.collapse ? '+' : '-'}}]</span>
			</span>
			<span v-show="!item.collapse">
				<ul v-if="item.children">
					<TreeItem2 :model="item.children"></TreeItem2>
				</ul>
			</span>
		</li>
		<li @click="addChild">+</li>
	</div>
</template>

<script setup>
	import {ref, reactive, onMounted} from 'vue'
	const props = defineProps({
		model: Array,
	})
	const addChild = () => {
		console.log(props.model)
		props.model?.push({name: 'new staff'})
	}
	const changeNodeType = (item) => {
		item.children = []
	}
	
	onMounted(() => {
		console.log(props)
	})
	
	
</script>

<style scoped>
	ul li{
		text-align: left;
	}
	.font-bold{
		font-weight: bold;
	}
</style>